<script setup lang="ts">
import { Button } from "element-ui";
import UserItem from "../components/UserItem.vue";
import PrettyInput from "../components/PrettyInput.vue";
import { ref } from "vue";

const userList = [
  {
    id: 1,
    firstName: "尼古拉斯",
    secondName: "赵四",
    description: "Description for User 1",
  },
  {
    id: 2,
    firstName: "尼古拉斯",
    secondName: "User 2",
    description: "Description for User 2",
  },
  {
    id: 3,
    firstName: "尼古拉斯",
    secondName: "User 3",
    description: "Description for User 3",
  },
];

const list = ref([...userList]);
const showUserList = ref(true);
// const { id, userName } = reactive(null)

const onInputUser = (e) => {
  const newName = e.target.value.trim();
  if (!newName) return;

  const userId = list.value.length + 1;
  list.value.unshift({
    id: userId,
    firstName: "尼古拉斯",
    secondName: newName,
    description: `Description for ${newName} ${userId}`,
  });
};

const onAddUser = () => {
  const userId = list.value.length + 1;
  list.value.unshift({
    id: userId,
    firstName: "尼古拉斯",
    secondName: `User ${userId}`,
    description: `Description for User ${userId}`,
  });
};

const onRemoveUser = (id: number) => {
  list.value = list.value.filter((user) => user.id !== id);
};

const onInputChange = (e) => {
  console.log("--ee--", e.target.value);
};

const onToggle = () => {
  showUserList.value = !showUserList.value;
};
</script>

<template>
  <div class="h-screen p-5 bg-amber-50">
    <Button type="primary" v-on:click="onToggle">
      {{ `${showUserList ? "隐藏" : "展示"}用户列表` }}
    </Button>
    <div v-if="showUserList" key="user-list">
      <div class="flex items-center justify-end">
        <pretty-input
          title="用户名"
          v-on:blur="onInputUser"
          v-on:input.native="onInputChange"
        />
        <Button @click="onAddUser">新增用户</Button>
      </div>
      <div class="flex items-center flex-wrap gap-4 mt-5">
        <user-item
          v-for="user in list"
          :key="user.id"
          :user="user"
          v-on:onRemoveUser="onRemoveUser"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
.page {
  /* background-image: repeating-radial-gradient(
    circle at 17% 32%,
    rgb(4, 4, 0),
    rgb(52, 72, 197),
    rgb(115, 252, 224),
    rgb(116, 71, 5),
    rgb(223, 46, 169),
    rgb(0, 160, 56),
    rgb(234, 255, 0) 0.0008px
  ); */

  /* background-image: repeating-radial-gradient(
    circle at 17% 32%,
    rgb(4, 4, 0),
    rgb(255, 255, 255) 0.0008px
  ); */
  /* background: repeating-radial-gradient(#eeeeee, #ffffff 0.0001%); */
}

.btn-box {
  display: flex;
  align-items: center;
}

.user-input {
  padding: 5px 10px;
  border: 1px solid #efefef;
  background-color: antiquewhite;
  border-radius: 6px;
  margin-right: 10px;
}
</style>
